YA 完成一個期末的東西
感謝學長幫review垃圾code
https://github.com/WeiZhiHuang/garbage-dragon

搞不好我明年就來寫vue+vuex
不 是今年

LARAVEL學習 DAY 18 VUE.JS（二）

前言

略

正文

這次我們就直接毫不留情把它原本的那個元件砍了吧
砍完之後把resources/views/index.blade.php的元件改成<app/>
app.js的元件宣告部分改成Vue.component('app', require('./components/App.vue'));
因為我們要拿app來當進入點
之後建立一個resources/assets/js/components/App.vue
裡面大概長這樣

<template>
  <div>
    Hello, world!
  </div>
</template>

<script>
export default {
  
}
</script>

然後

npm run watch
-- or --
yarn watch

然後就會看到一個很老套的東西了...

不管啦 來裝套件（頭痛）

npm install vue-router
-- or --
yarn add vue-router

裝完之後把app.js改成這樣

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import VueRouter from 'vue-router';
import router from './router';

Vue.use(VueRouter);
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('app', require('./components/App.vue'));

const app = new Vue({
    el: '#app',
    router
});

然後再重新watch（保守起見）

會報錯是正常的 因為我們沒有router.js
再來就是新增resources/assets/js/router.js

import VueRouter from 'vue-router';

const routes = [
  {
    path: '/',
    component: require('./components/Index')
  }
];

const router = new VueRouter({ routes });
export default router;

之後新增resources/assets/js/components/Index.vue

<template>
  <div>
    Hi, world!
  </div>  
</template>

<script>
export default {
  
}
</script>

然後就會發現 watch過了是過了 可是還是沒什麼Hi, world!...
這是因為我們的vue-router根本找不到地方注入啊～
那就到App.vue來注入吧
在那個Hello, world!下面新增一個<router-view/>就萬事太平了

其他的下一篇再說

結語

略